<template>
    <el-dialog title="视频播放" v-model="dialogVisible" width="980px" append-to-body :close-on-click-modal="false">
        <div v-if="visible" class="dialog-container">
            <video ref="videoRef" id="video" controlslist="nodownload" controls="controls"
                :src="playUrl">您的浏览器不支持视频播放</video>
        </div>
    </el-dialog>
</template>
  
<script setup>
import { watch } from 'vue';
import { addDuration } from "@/api/course/couseTime";
import { ElMessage } from 'element-plus';

const emits = defineEmits(['update:visible'])
const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    playUrl: {
        type: String,
        default: ''
    },
    timeId: {
        type: Number,
        default: null
    }
})
const videoRef = ref()
const dialogVisible = computed({
    get: () => {
        return props.visible
    },
    set: (value) => {
        emits('update:visible', value)
    }
})
watch(()=>props.visible, value=>{
    if (null === props.timeId) {
        return
    }
    if (value) {
        addDuration({
            timeId: props.timeId,
            lookStatus: 'start'
        }) 
    }else {
        addDuration({
            timeId: props.timeId,
            lookStatus: 'end'
        }) 
    }
})
const onPlay = (ev) => {
    console.log('播放')
}
const onPause = (ev) => {
    console.log(ev, '暂停')
}

</script>
  
<style lang="scss" scoped>
.dialog-container {
    video {
        width: 800px;
        height: 450px;
    }

    display: flex;
    align-items: center;
    justify-content: center;
}

video::-internal-media-controls-download-button {
    display: none;
}

video::-webkit-media-controls-enclosure {
    overflow: hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px);
}</style>